import { useState, useEffect, useRef } from "react";
import styles from "./index.module.less";

const AntdWrapper = props => {
	const [focus, setFocus] = useState(false);

	// const listenFocusRef = useRef(null);

	// useEffect(()=>{
	//   console.log(listenFocusRef.current.state)
	// },[listenFocusRef])

	return (
		<div
			className={`${styles.antdWrapper} ${focus ? styles.antdFormItemFocused : ""}`}
			onFocus={() => setFocus(true)}
			onBlur={() => setFocus(false)}
			style={{ ...props.style }}
		>
			{props.label && (
				<div className={styles.antdLabel} style={{ ...props?.labelStyle }}>
					{props.label}
				</div>
			)}
			<div className={styles.antdContent}>
				{/* <Input ref={listenFocusRef}/>
         <input ref={listenFocusRef}/> */}
				{props.children}
			</div>
			{props.suffix && <div className={styles.antdSuffix}>{props.suffix}</div>}
		</div>
	);
};

export default AntdWrapper;
